<!DOCTYPE html>
<html>

<head>
	<title>dead and broke</title>

	<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> -->
	<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
	<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script> -->
	<script src="https://cdn.staticfile.org/jqueryui/1.12.1/jquery-ui.min.js"></script>
	<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/10.0.0/bootstrap-slider.js"></script> -->
	<script src="https://cdn.staticfile.org/bootstrap-slider/10.0.0/bootstrap-slider.min.js"></script>
	<!-- <script src="https://engaging-data.com/pages/scripts/arrayfunctions.js"></script> -->
	<script src="arrayfunctions.js"></script>
	<!-- <script src="https://engaging-data.com/pages/scripts/annmarketdata.js"></script> -->
	<script src="annmarketdata.js"></script>
	<!-- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> -->
	<script src="plotly-latest.min.js"></script>

	<script src="RBoD-r2.js"></script>
	<script src="survivalrates.js"></script>
	<script src="rbodparams-r2.js"></script>
	<link rel="stylesheet" href="main.css">
</head>

<body onload="parseURLparams();calcandplot();">

	<div id="calculator">
		<div class="container" id="top">
			<div class="row-no-padding">
				<div class="col-6">
					<div class="form-group">
						<label for="spending"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="This is the amount of money that you expect to spend annually when retired.">Spending/yr</a>
						</label><input type="text" name="spending" class="inputbox" id="annualspending"
							autocomplete="off" value="$40,000" onchange="calcandplot();">
					</div>
					<div class="form-group">
						<label for="saving"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="This is the amount of money that you have saved up and expect to live off of during retirement.">Savings</a></label><input
							type="text" name=spending class="inputbox" id="totalsavings" autocomplete="off"
							value="$1,000,000" onchange="calcandplot();">
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="age"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom" data-content="Age that you expect to retire.">Retire
								Age</a></label><input type="text" class="inputbox" name="age" id="retireage"
							autocomplete="off" value=40 onchange="calcandplot();">
					</div>

					<div class="form-group">
						<label for="yrs"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Number of years that you expect to be retired.">Retirement
								Yrs</a></label><input type="text" class="inputbox" name="yrs" id="cyclelength"
							autocomplete="off" value=50 onchange="calcandplot();">
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="spendflex"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Percentage of your annual spending that you could reduce when portfolio balance is lower than your initial balance. This only applies when your portfolio balance is lower than your initial balance (on an inflation-adjusted basis)."
								id="spendflex">Spending Flexibility %</a></label><input type="text" class="inputbox"
							name="flexpct" id="flexpct" autocomplete="off" value=0 onchange="calcandplot();">
					</div>
					<div class="form-group">
						</span><label for="sex">Sex:</label>
						<input id="male" type="radio" name="sex" value="M" checked onclick="calcandplot();"> <span
							class="choice">Male</span>
						<input id="female" type="radio" name="sex" value="F" onclick="calcandplot();"><span
							class="choice"> Female</span>
					</div>

				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="stock"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Enter the whole number percentage of stocks in your target portfolio. The sum of stock, bond and cash allocations should add to 100%.  In this calculation, assets will be rebalanced to the specified allocation annually. ">Stock
								%</a></label><input type="text" name="stock" class="inputbox" id="stockpct"
							autocomplete="off" value=80 onchange="checkallocationinputs();">
					</div>

					<div class="form-group">
						<label for="bond"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Enter the whole number percentage of fixed rate assets like bonds in your target portfolio. The sum of stock, bond and cash allocations should add to 100%.  In this calculation, assets will be rebalanced to the specified allocation annually.">Bond
								%</a></label><input type="text" name="bond" class="inputbox" id="bondpct"
							autocomplete="off" value=18 onchange="checkallocationinputs();">
					</div>

					<div class="form-group">
						<label for="cash"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Enter the whole number percentage of cash in your target portfolio. The sum of stock, bond and cash allocations should add to 100%.  In this calculation, assets will be rebalanced to the specified allocation annually.">Cash
								%</a></label><input type="text" name="cash" class="inputbox" id="cashpct"
							autocomplete="off" value=2 onchange="checkallocationinputs();">
					</div>
				</div>
				<div class="col-6">



				</div>

				<div class="col-6">
					<div class="form-group">
						<label for="tax"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Average Income Tax Rate (%).  This is applied only to the amount you spend each year.  Note that this is not your tax bracket marginal tax rate.">Avg
								Tax Rate</a></label>

						<input type="text" class="inputbox" class="form-control" name="tax" id="taxrate"
							autocomplete="off" value=0% onchange="calcandplot();">%<span class="spacer1"></span>
					</div>

					<div class="form-group">
						<label for="fee"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Average Investment Fees on Stock and Bonds (%)">Investment
								Fees</a></label>
						<input type="text" class="inputbox" name="fee" id="invfees" autocomplete="off" value=0.3
							onchange="calcandplot();">%
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="inflradio"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Inflation toggle: <br><b>Nominal</b> shows dollars whose value each year changes due to inflation (typically the value goes down over time so that 1 nominal dollar today is worth more than 1 dollar in the future). <br><b>Inflation adjusted</b>, also known as <i>real</i> or <i>current</i> shows dollars whose value is adjusted for inflation (inflation is removed so that 1 inflation adjusted dollar today is equal to 1 dollar in the future.) ">Show
								inflation: </a></label><input id="nominal" type="radio" name="inflradio"
							onclick="calcandplot();"> <span class="choice">Nominal </span><input id="real" type="radio"
							name="inflradio" checked onclick="calcandplot();"> <span class="choice">Inflation
							Adj.</span>
					</div>
				</div>



				<div class="col-6">

					<div class="form-group">
						<label for="income"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="This is the annual benefit amount you expect from social security, pension or other income in current dollars (the program will inflate this amount to future dollars).  You may enter multiple income streams separated by a semi-colon (;)">Extra
								income</a></label>
						<input type="text" class="inputbox" id="incomevalue" name="income" autocomplete="off" value=$0
							onchange="calcandplot();">
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="incomestart"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Age that income starts.  If you have multiple income streams entered, make sure you also enter the same number of starting ages all separated by a semi-colon (;).">Start
								Age</a></label>
						<input type="text" class="inputbox" id="incomestart" name="incomestart" autocomplete="off"
							value=50 onchange="calcandplot();">
					</div>

					<div class="form-group">
						<label for="incomeend"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Age that income ends.  If you have multiple income streams entered, make sure you also enter the same number of ending ages all separated by a semi-colon (;).">End
								Age</a></label>
						<input type="text" class="inputbox" id="incomeend" name="incomeend" autocomplete="off" value=70
							onchange="calcandplot();">
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="expense"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="This is the annual additional spending amount for an expense (e.g. college or mortgage) in current dollars (the program will inflate this amount to future dollars).  You may enter multiple expenses separated by a semi-colon (;)">Extra
								expense</a></label>
						<input type="text" class="inputbox" name="expense" id="expensevalue" autocomplete="off" value=$0
							onchange="calcandplot();">
					</div>
				</div>
				<div class="col-6">
					<div class="form-group">
						<label for="expensestart"><a href="#" data-toggle="popover" data-html="true"
								data-trigger="hover" data-placement="bottom"
								data-content="Age that expense starts.   If you have multiple expenses entered, make sure you also enter the same number of starting ages all separated by a semi-colon (;).">Start
								Age</a></label>
						<input type="text" class="inputbox" name="expensestart" id="expensestart" autocomplete="off"
							value=50 onchange="calcandplot();">
					</div>
					<div class="form-group">
						<label for="expensesend"><a href="#" data-toggle="popover" data-html="true" data-trigger="hover"
								data-placement="bottom"
								data-content="Age that expense ends.   If you have multiple expenses entered, make sure you also enter the same number of ending ages all separated by a semi-colon (;).">End
								Age</a></label>
						<input type="text" class="inputbox" id="expenseend" name="expenseend" autocomplete="off"
							value=70 onchange="calcandplot();">
					</div>
				</div>


				<div class="col-12">
					<div class="wedges">

						<label><b>Toggle wedges:</b> </label>
					</div>
					<div class="wedges">
						<span id="death"> <a href="#" class="wedgetoggle" data-toggle="popover" data-html="true"
								data-trigger="hover" data-placement="bottom"
								data-content="Click to toggle the graph to show/hide the wedge of death."><span
									class="choice">Death</span></a> <input type="checkbox" class="check wedgetoggle"
								id="showdeath" checked=checked value=0 onclick="calcandplot();">&nbsp;</span>

						<span id="below"><a href="#" class="wedgetoggle" data-toggle="popover" data-html="true"
								data-trigger="hover" data-placement="bottom"
								data-content="Click to toggle the graph to aggregate/separate success probabilities for balances below the initial starting value (but above zero)."><span
									class="choice">Success (Bal < start)</span></a> <input class="check wedgetoggle"
								type="checkbox" id="belowstart" checked=checked value=0
								onclick="calcandplot();">&nbsp;</span>
					</div>
					<div class="wedges">
						<span id="above"><a href="#" class="wedgetoggle" data-toggle="popover" data-html="true"
								data-trigger="hover" data-placement="bottom"
								data-content="Click to toggle the graph to aggregate/separate success probabilities for balances that are more than double the initial starting value."><span
									class="choice">Success (Bal > 2x)</span></a> <input class="check wedgetoggle"
								type="checkbox" id="twoXstart" checked=checked value=1
								onclick="calcandplot();">&nbsp;</span>

						<span id="high"><a href="#" class="wedgetoggle" data-toggle="popover" data-html="true"
								data-trigger="hover" data-placement="bottom"
								data-content="Click to toggle the graph to aggregate/separate success probabilities for balances that are more than five times the initial starting value."><span
									class="choice">Success (Bal > 5x)</span></a> <input class="check wedgetoggle"
								type="checkbox" id="fiveXstart" checked=checked value=1
								onclick="calcandplot();">&nbsp;</span>
					</div>
				</div>
			</div>
		</div>
		<div class="col-12" id="graph" style="background-color:#eeeeee; border-radius:10px;">
			<div id='myDiv'></div>
			<span id="errormsg"></span>
		</div>
	</div>
	</div>
	<script>
		$(document).ready(function () {
			$('[data-toggle="popover"]').popover();
		});

	</script>
</body>

</html>